<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>Title</title>
    <link rel="stylesheet" href="bower_components/semantic/dist/semantic.css">
    <style>
        .main.container{
            padding-top: 50px;
        }
    </style>
</head>
<body>
<div class="ui inverted fixed menu">
    <div class="header item">Tutorial</div>
</div>
<div class="ui main container" id="app">
 <p @click="demo2">
     <!--阻止默认事件-->
     <a href="http://grafikart.fr" @click.prevent="demo">法语Vue2.0教程 prevent</a><br>

     <!--阻止冒泡-->
     <a href="http://grafikart.fr" @click.stop="demo">法语Vue2.0教程 stop</a><br>

     <!--阻止冒泡和默认事件-->
     <a href="http://grafikart.fr" @click.prevent.stop="demo">法语Vue2.0教程 stop&prevent</a><br>


     <a href="http://grafikart.fr" @click.capture="demo">法语Vue2.0教程 capture</a><br>

     <a href="http://grafikart.fr" @click.self="demo">法语Vue2.0教程 self</a>


 </p>
</div>



<script src="bower_components/vue/dist/vue.js"></script>
<script src="js/app_lesson5.1.js"></script>

</body>
</html>